<template>
  <div>
    <div class="card" style="margin-bottom: 10px">
      <el-input placeholder="请输入图像名查询" style="width: 200px" v-model="data.imageName"></el-input>
      <el-button type="info" plain style="margin-left: 10px" @click="load()">查询</el-button>
      <el-button type="warning" plain style="margin-left: 10px" @click="reset">重置</el-button>
    </div>

    <div class="card">
      <div style="margin-bottom: 10px">
        <el-button type="primary" plain @click="handleAdd">上传脑影像</el-button>
      </div>
      <el-table :data="data.tableData" strip @selection-change="handleSelectionChange" max-height="520">
        <el-table-column prop="imageName" label="MRI影像文件名"></el-table-column>
        <el-table-column prop="uploadedAt" label="影像上传时间"></el-table-column>
        <el-table-column label="MRI影像处理状态">
          <template v-slot="scope">
            <el-tag :type="getStatusTagType(scope.row.status)">
              {{ getStatusLabel(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="410">
          <template v-slot="scope">
            <el-button size="default" type="success" plain @click="lookPng(scope.row)">查看脑影像</el-button>
            <el-button size="default" type="primary" plain @click="beforeSubmit(scope.row)">提交诊断申请</el-button>
            <el-button size="default" type="danger" plain @click="handleDownload(scope.row)">
              下载原始影像文件
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
            style="margin-top: 5px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="data.pageNum"
            :page-sizes="[3, 5, 10, 15, 20]"
            :page-size="data.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="data.total">
        </el-pagination>
      </div>
    </div>

    <!-- 优化后的上传脑影像弹框 -->
    <el-dialog
        title="上传脑影像"
        v-model="data.formVisible"
        width="600px"
        :close-on-click-modal="false"
        destroy-on-close
        class="upload-dialog">
      <div class="upload-container">
        <!-- 上传说明区域 -->
        <div class="upload-info">
          <el-alert
              title="上传须知"
              type="info"
              :closable="false">
            <template #default>
              <div class="upload-guidelines">
                <p>1. 仅支持 .nii 或 .nii.gz 格式的脑影像文件</p>
                <p>2. 单次仅可上传一个文件</p>
                <p>3. 上传过程中请勿关闭窗口或刷新页面</p>
                <p>4. 文件上传后需要3-5分钟进行处理，请耐心等待</p>
              </div>
            </template>
          </el-alert>
        </div>

        <!-- 上传区域 -->
        <div class="upload-area">
          <el-upload
              class="upload-component"
              :action="uploadUrl"
              :headers="data.uploadHeaders"
              :before-upload="handleBeforeUpload"
              :on-success="handleImgUploadSuccess"
              :limit="1"
              accept=".nii,.nii.gz"
              drag>
            <div class="upload-content">
              <el-icon class="upload-icon"><Upload /></el-icon>
              <div class="upload-text">
                <em>点击上传</em> 或将文件拖拽到此处
              </div>
              <div class="upload-tip">支持 .nii, .nii.gz 格式文件</div>
            </div>
          </el-upload>
        </div>

        <!-- 上传状态提示 -->
        <div class="upload-status" v-if="data.isUploading">
          <el-progress
              :percentage="data.uploadProgress"
              :status="data.uploadStatus"
              :stroke-width="10"
              class="upload-progress"/>
          <div class="status-text">{{ data.uploadStatusText }}</div>
        </div>

        <!-- 警告提示 -->
        <div class="upload-warning">
          <el-alert
              type="error"
              :closable="false"
              class="important-alert">
            <template #icon>
              <el-icon><Warning /></el-icon>
            </template>
            <template #title>
              <span class="important-title">重要提示</span>
            </template>
            <template #default>
              <div class="important-content">
                上传过程中请勿进行任何操作！文件处理可能需要几分钟时间。
              </div>
            </template>
          </el-alert>
        </div>
      </div>

      <!-- 对话框底部按钮 -->
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="data.formVisible = false" :disabled="data.isUploading">取 消</el-button>
        </div>
      </template>
    </el-dialog>


    <!-- 优化后的脑影像图片弹框 -->
    <el-dialog
        title="脑影像分析视图"
        v-model="data.PngVisible"
        width="90%"
        :close-on-click-modal="false"
        destroy-on-close
        class="brain-image-dialog">

      <div class="brain-view-container">
        <!-- 工具栏 -->
        <div class="toolbar">
          <el-radio-group v-model="data.currentView" size="large">
            <el-radio-button label="all">全部视图</el-radio-button>
            <el-radio-button label="axial">横轴位</el-radio-button>
            <el-radio-button label="sagittal">矢状位</el-radio-button>
            <el-radio-button label="coronal">冠状位</el-radio-button>
          </el-radio-group>

          <div class="view-controls">
            <el-tooltip content="图像缩放">
              <div class="zoom-control">
                <el-icon><ZoomOut /></el-icon>
                <el-slider v-model="data.zoomLevel" :min="50" :max="150" style="width: 100px"/>
                <el-icon><ZoomIn /></el-icon>
              </div>
            </el-tooltip>
            <el-button-group>
              <el-tooltip content="重置视图">
                <el-button :icon="Refresh" circle @click="resetView"/>
              </el-tooltip>
            </el-button-group>
          </div>
        </div>

        <!-- 图像展示区域 -->
        <el-row :gutter="20" class="image-container">
          <!-- 横轴位图像 -->
          <el-col :span="viewSpan" v-show="showView('axial')">
            <div class="view-panel">
              <div class="panel-header">
                <h3>横轴位图像</h3>
                <div class="panel-controls">
                  <span class="image-count">共 {{ data.AxialImages.length }} 张</span>
                  <el-tooltip content="自动播放">
                    <el-button :icon="VideoPlay" circle size="small" @click="playSlideshow('axial')"/>
                  </el-tooltip>
                </div>
              </div>
              <el-scrollbar class="custom-scrollbar" :style="scrollbarStyle">
                <div class="image-grid">
                  <div v-for="(image, index) in data.AxialImages"
                       :key="index"
                       class="image-wrapper">
                    <el-image
                        :src="image"
                        :style="imageStyle"
                        :preview-src-list="data.AxialImages"
                        :initial-index="index"
                        :z-index="3000"
                        fit="contain"
                        loading="lazy"
                        :hide-on-click-modal="false"
                        preview-teleported
                        @load="handleImageLoad"
                    >
                      <template #placeholder>
                        <div class="image-placeholder">
                          <el-icon class="is-loading"><Loading /></el-icon>
                          <span>加载中...</span>
                        </div>
                      </template>
                      <template #error>
                        <div class="image-error">
                          <el-icon><PictureFilled /></el-icon>
                          <span>加载失败</span>
                        </div>
                      </template>
                    </el-image>
                    <div class="image-index">{{ index + 1 }}/{{ data.AxialImages.length }}</div>
                  </div>
                </div>
              </el-scrollbar>
            </div>
          </el-col>

          <!-- 矢状位图像 -->
          <el-col :span="viewSpan" v-show="showView('sagittal')">
            <div class="view-panel">
              <div class="panel-header">
                <h3>矢状位图像</h3>
                <div class="panel-controls">
                  <span class="image-count">共 {{ data.SagittalImages.length }} 张</span>
                  <el-tooltip content="自动播放">
                    <el-button :icon="VideoPlay" circle size="small" @click="playSlideshow('sagittal')"/>
                  </el-tooltip>
                </div>
              </div>
              <el-scrollbar class="custom-scrollbar" :style="scrollbarStyle">
                <div class="image-grid">
                  <div v-for="(image, index) in data.SagittalImages"
                       :key="index"
                       class="image-wrapper">
                    <el-image
                        :src="image"
                        :style="imageStyle"
                        :preview-src-list="data.SagittalImages"
                        :initial-index="index"
                        :z-index="3000"
                        fit="contain"
                        loading="lazy"
                        :hide-on-click-modal="false"
                        preview-teleported
                    >
                      <template #placeholder>
                        <div class="image-placeholder">
                          <el-icon class="is-loading"><Loading /></el-icon>
                          <span>加载中...</span>
                        </div>
                      </template>
                    </el-image>
                    <div class="image-index">{{ index + 1 }}/{{ data.SagittalImages.length }}</div>
                  </div>
                </div>
              </el-scrollbar>
            </div>
          </el-col>

          <!-- 冠状位图像 -->
          <el-col :span="viewSpan" v-show="showView('coronal')">
            <div class="view-panel">
              <div class="panel-header">
                <h3>冠状位图像</h3>
                <div class="panel-controls">
                  <span class="image-count">共 {{ data.CoronalImages.length }} 张</span>
                  <el-tooltip content="自动播放">
                    <el-button :icon="VideoPlay" circle size="small" @click="playSlideshow('coronal')"/>
                  </el-tooltip>
                </div>
              </div>
              <el-scrollbar class="custom-scrollbar" :style="scrollbarStyle">
                <div class="image-grid">
                  <div v-for="(image, index) in data.CoronalImages"
                       :key="index"
                       class="image-wrapper">
                    <el-image
                        :src="image"
                        :style="imageStyle"
                        :preview-src-list="data.CoronalImages"
                        :initial-index="index"
                        :z-index="3000"
                        fit="contain"
                        loading="lazy"
                        :hide-on-click-modal="false"
                        preview-teleported
                    >
                      <template #placeholder>
                        <div class="image-placeholder">
                          <el-icon class="is-loading"><Loading /></el-icon>
                          <span>加载中...</span>
                        </div>
                      </template>
                    </el-image>
                    <div class="image-index">{{ index + 1 }}/{{ data.CoronalImages.length }}</div>
                  </div>
                </div>
              </el-scrollbar>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>

    <el-dialog title="提交诊断申请" v-model="data.DiagnosingVisible" width="85%" :close-on-click-modal="false"
               destroy-on-close>
      <el-form :model="data.DiagnosisForm" :rules="rules" ref="diagnosisForm" label-width="120px"
               style="padding-right: 50px">

        <!-- 患者主诉 -->
        <el-form-item label="患者主诉" prop="patientComplaint">
          <el-input
              type="textarea"
              v-model="data.DiagnosisForm.patientComplaint"
              placeholder="请输入患者主诉"
              rows="3">
          </el-input>
        </el-form-item>

        <!-- 现病史 -->
        <el-form-item label="现病史" prop="currentMedicalHistory">
          <el-input
              type="textarea"
              v-model="data.DiagnosisForm.currentMedicalHistory"
              placeholder="请输入现病史"
              rows="3">
          </el-input>
        </el-form-item>

        <!-- 既往史 -->
        <el-form-item label="既往史" prop="pastMedicalHistory">
          <el-input
              type="textarea"
              v-model="data.DiagnosisForm.pastMedicalHistory"
              placeholder="请输入既往史"
              rows="3">
          </el-input>
        </el-form-item>

        <!-- 家族史 -->
        <el-form-item label="家族史" prop="familyMedicalHistory">
          <el-input
              type="textarea"
              v-model="data.DiagnosisForm.familyMedicalHistory"
              placeholder="请输入家族史"
              rows="3">
          </el-input>
        </el-form-item>

        <!-- 提交按钮 -->
        <el-form-item>
          <el-button type="primary" @click="submit">提交申请</el-button>
          <el-button @click="data.DiagnosingVisible = false">取消</el-button>
        </el-form-item>

      </el-form>
    </el-dialog>
  </div>
  <el-dialog
      v-model="data.slideshowDialog"
      title="图像自动播放"
      width="80%"
      :close-on-click-modal="false"
      @close="closeSlideshow"
      destroy-on-close
      class="slideshow-dialog"
  >
    <div class="slideshow-container">
      <div class="slideshow-image">
        <el-image
            v-if="data.slideshowImages.length > 0"
            :src="data.slideshowImages[data.currentSlideIndex]"
            fit="contain"
            style="width: 100%; height: 60vh;"
        />
      </div>
      <div class="slideshow-controls">
      <span class="image-counter">
        {{ data.currentSlideIndex + 1 }} / {{ data.slideshowImages.length }}
      </span>
        <el-button-group>
          <el-button
              :icon="data.isPlaying ? VideoPause : VideoPlay"
              @click="togglePlay"
              type="primary"
          >
            {{ data.isPlaying ? '暂停' : '播放' }}
          </el-button>
          <el-button @click="closeSlideshow">关闭</el-button>
        </el-button-group>
      </div>
    </div>
  </el-dialog>
</template>
<script setup>
import { reactive, computed, ref, onUnmounted } from 'vue'
import {
  Refresh,
  FullScreen,
  Loading,
  ZoomIn,
  ZoomOut,
  VideoPlay,
  Warning,
  PictureFilled
} from '@element-plus/icons-vue'
import request from '@/utils/request'
import { ElImageViewer } from 'element-plus'
import { ElMessage } from 'element-plus'
import { hideLoading, showLoading } from "@/utils/LoadingUtil"


// 文件上传的接口地址
const uploadUrl = import.meta.env.VITE_BASE_URL + '/files/upload'

// 定义响应式数据
const data = reactive({
  tableData: [],  // 表格数据
  pageNum: 1,     // 当前页码
  pageSize: 10,   // 每页显示数量
  total: 0,       // 总记录数
  imageName: null,     // 搜索条件
  formVisible: false, // 表单显示状态
  form: {},       // 表单数据
  ids: [],        // 选中数据的ID
  user: JSON.parse(localStorage.getItem('system-user') || '{}'), // 当前用户信息，
  uploadHeaders: {
    'token': localStorage.getItem('token')
  },
  canSave: false,
  AxialImages: [],
  SagittalImages: [],
  CoronalImages: [],
  PngVisible: false,
  DiagnosingVisible: false,
  DiagnosisForm: {},
  currentView: 'all',
  zoomLevel: 100,
  loadedImages: 0,
  totalImages: 0,
  slideshowInterval: null,

})


// 分页查询
const load = () => {
  request.get('/mriImages/selectPage', {
    params: {
      pageNum: data.pageNum,
      pageSize: data.pageSize,
      imageName: data.imageName,
      userId: data.user.id
    }
  }).then(res => {
    if (res.code === '200') {
      data.tableData = res.data?.list
      data.total = res.data?.total
    } else {
      ElMessage.error(res.msg)
    }
  })
}
load()

// 下载原始图片文件
const handleDownload = (row) => {
  request.get('mriImages/downloadNiiFile/' + row.id).then((res) => {
    window.location.href = res.data
  })
}

// 新增数据
const handleAdd = () => {
  data.form = {}
  data.formVisible = true
  data.canSave = false
}


// 保存数据
const save = async () => {
  showLoading('图像处理中，请稍后......')
  const url = '/mriImages/add'
  const method = 'POST'
  data.form.userId = data.user.id
  data.form.status = 'Waiting'
  await request({
    url,
    method,
    data: data.form,
  }).then(res => {

    if (res.code === '200') {
      load()
      ElMessage.success('提交成功！')
      data.formVisible = false
      hideLoading()
    } else {
      ElMessage.error(res.msg)
    }
  })
}

// 处理选中的行
const handleSelectionChange = (rows) => {
  data.ids = rows.map(v => v.id)
}
// 重置筛选条件
const reset = () => {
  data.imageName = null
  load()
}
// 处理页码变化
const handleCurrentChange = (pageNum) => {
  data.pageNum = pageNum
  load(pageNum)
}
const handleSizeChange = (pageSize) => {
  data.pageSize = pageSize
  load()
}

// 上传文件前的操作
const handleBeforeUpload = async (file) => {
  showLoading('脑影像文件上传中...')
};

// 上传文件后的操作
const handleImgUploadSuccess = async (res) => {
  if (res.code === '200') {
    hideLoading()
    data.form.imageName = res.data.originalFilename
    data.form.imagePath = res.data.url
    data.form.seed = res.data.thUrl
    ElMessage.success("图像上传成功，正在处理图片...")
    await save()
    data.formVisible = false
  } else {
    ElMessage.error(res.msg)
    data.formVisible1 = false
  }
}

const getStatusLabel = (status) => {
  switch (status) {
    case 'Pending':
      return '等待批准';
    case 'Diagnosing':
      return '正在诊断';
    case 'Completed':
      return '诊断完成';
    case 'Waiting':
      return '等待提交';
    default:
      return '拒绝提交';
  }
}
const getStatusTagType = (status) => {
  switch (status) {
    case 'Pending':
      return 'default';         // 待提交，蓝色
    case 'Diagnosing':
      return 'warning';      // 已诊断，黄色
    case 'Completed':
      return 'success';      // 已完成，绿色
    case 'Waiting':
      return 'info';  // 等待中，灰色
    default:
      return 'danger';      // 其他状态，灰色
  }
}
const beforeSubmit = (row) => {
  if (row.status !== 'Waiting') {
    ElMessage.error("当前状态不允许提交申请")
  } else {
    data.DiagnosisForm = {}
    data.DiagnosisForm.userId = data.user.id
    data.DiagnosisForm.imageId = row.id
    data.DiagnosisForm.status = 'Pending'
    data.DiagnosingVisible = true
  }
}
const submit = async () => {
  diagnosisForm.value.validate((valid) => {
    if (valid) {
      addDiagnosis()
    } else {
      ElMessage.error('请填写必须的参数！')
      return false
    }
  })
}
const addDiagnosis = async () => {
  await request.post('/diagnosis/add', data.DiagnosisForm).then(res => {
    if (res.code === '200') {
      ElMessage.success('提交申请成功')
      data.DiagnosingVisible = false
      load()
    } else {
      ElMessage.error(res.msg)
    }
  })
}

const lookPng = async (row) => {
  data.AxialImages = [];
  data.SagittalImages = [];
  data.CoronalImages = [];
  data.PngVisible = false;

  showLoading('加载中...');

  try {
    const res = await request.get(`/mriImages/getPngList/${row.seed}/${row.imageName}`);

    if (res.code !== '200') {
      ElMessage.error(res.msg || '请求失败，请重试');
      return;
    }

    const uploadTime = new Date(row.uploadedAt);
    const currentTime = new Date();
    const timeDiff = currentTime - uploadTime;

    if (res.data.length === 0) {
      if (timeDiff < 300000) {
        ElMessage.warning('当前图像正在生成，请等待3-5分钟');
      } else {
        ElMessage.error('当前图像生成失败，请联系管理员或重新上传');
      }
    } else {
      data.AxialImages = res.data[0];
      data.SagittalImages = res.data[2];
      data.CoronalImages = res.data[1];
      data.PngVisible = true; // 显示对话框
    }
  } catch (error) {
    console.error('请求失败:', error);
    ElMessage.error('网络请求失败，请稍后重试');
  } finally {
    hideLoading();
  }
};


const diagnosisForm = ref()
const rules = {
  patientComplaint: [
    {required: true, message: '请输入患者主诉', trigger: 'blur'}
  ],
  currentMedicalHistory: [
    {required: true, message: '请输入现病史', trigger: 'blur'}
  ],
  pastMedicalHistory: [
    {required: true, message: '请输入既往史', trigger: 'blur'}
  ],
  familyMedicalHistory: [
    {required: true, message: '请输入家族史', trigger: 'blur'}
  ],
}

// 计算属性
const viewSpan = computed(() => {
  return data.currentView === 'all' ? 8 : 24
})

const imageStyle = computed(() => ({
  width: `${data.zoomLevel}%`,
  transition: 'all 0.3s ease'
}))

const scrollbarStyle = computed(() => ({
  height: '430px',
  transition: 'height 0.3s ease'
}))

// 方法
const showView = (view) => {
  return data.currentView === 'all' || data.currentView === view
}

const resetView = () => {
  data.zoomLevel = 100
  data.currentView = 'all'
}


const handleImageLoad = () => {
  data.loadedImages++
  if (data.loadedImages === data.totalImages) {
    hideLoading()
  }
}

const playSlideshow = (view) => {
  const images = {
    axial: data.AxialImages,
    sagittal: data.SagittalImages,
    coronal: data.CoronalImages
  }[view]

  if (!images || images.length === 0) {
    ElMessage.warning('没有可播放的图片')
    return
  }

  // 设置幻灯片数据
  data.slideshowImages = images
  data.currentSlideIndex = 0
  data.slideshowDialog = true
  data.isPlaying = true

  // 开始自动播放
  startSlideshow()
}

// 添加新的控制函数
const startSlideshow = () => {
  if (data.currentSlideshow) {
    clearInterval(data.currentSlideshow)
  }

  data.currentSlideshow = setInterval(() => {
    if (data.isPlaying) {
      data.currentSlideIndex = (data.currentSlideIndex + 1) % data.slideshowImages.length
    }
  }, 1000) // 每秒切换一张
}

const togglePlay = () => {
  data.isPlaying = !data.isPlaying
  if (data.isPlaying) {
    startSlideshow()
  }
}

const closeSlideshow = () => {
  if (data.currentSlideshow) {
    clearInterval(data.currentSlideshow)
  }
  data.slideshowDialog = false
  data.isPlaying = false
  data.currentSlideIndex = 0
}

</script>


<style>
/* 全局样式 */
.brain-image-dialog .el-dialog {
  margin: 5vh auto !important;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* 滚动条样式 */
.custom-scrollbar .el-scrollbar__bar.is-horizontal {
  height: 8px;
}

.custom-scrollbar .el-scrollbar__bar.is-vertical {
  width: 8px;
}

.custom-scrollbar .el-scrollbar__thumb {
  background-color: rgba(144, 147, 153, 0.3);
  border-radius: 4px;
}

.custom-scrollbar .el-scrollbar__thumb:hover {
  background-color: rgba(144, 147, 153, 0.5);
}

</style>

<style scoped>
.brain-view-container {
  padding: 20px;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 10px;
  background: #f5f7fa;
  border-radius: 8px;
}

.view-controls {
  display: flex;
  align-items: center;
  gap: 20px;
}

.zoom-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.view-panel {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  height: 100%;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #ebeef5;
}

.panel-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.image-count {
  color: #909399;
  font-size: 14px;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  padding: 16px;
}

.image-wrapper {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  background: #f5f7fa;
}

.image-index {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.image-placeholder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 200px;
  gap: 8px;
  color: #909399;
}

.image-error {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 200px;
  gap: 8px;
  color: #f56c6c;
}

/* 加载动画 */
.is-loading {
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 图片容器样式 */
.image-container {
  margin-top: 20px;
}

/* 图片网格响应式布局 */
@media screen and (max-width: 1200px) {
  .image-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

@media screen and (max-width: 768px) {
  .image-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  .toolbar {
    flex-direction: column;
    gap: 10px;
  }

  .view-controls {
    width: 100%;
    justify-content: center;
  }
}

/* 上传对话框样式 */
.upload-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.upload-info {
  margin-bottom: 20px;
}

.upload-guidelines {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
}

.upload-guidelines p {
  margin: 4px 0;
  color: #606266;
}

.upload-area {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

.upload-component {
  width: 100%;
}

.upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 0;
}

.upload-icon {
  font-size: 48px;
  color: #409EFF;
  margin-bottom: 16px;
}

.upload-text {
  font-size: 16px;
  color: #606266;
  margin-bottom: 8px;
}

.upload-text em {
  color: #409EFF;
  font-style: normal;
  margin: 0 4px;
}

.upload-tip {
  font-size: 14px;
  color: #909399;
}

.upload-status {
  padding: 16px;
  background: #f8f9fa;
  border-radius: 4px;
}

.upload-progress {
  margin-bottom: 12px;
}

.status-text {
  text-align: center;
  color: #606266;
  font-size: 14px;
}

.upload-warning {
  margin-top: 16px;
}

.dialog-footer {
  text-align: right;
  padding-top: 20px;
}
/* 重要提示样式 */
.upload-warning {
  margin-top: 16px;
}

.important-alert {
  background-color: #fff1f0;
  border: 1px solid #ffccc7;
}

.important-title {
  font-size: 16px;
  font-weight: bold;
  color: #f5222d;
}

.important-content {
  font-size: 14px;
  line-height: 1.5;
  color: #ff4d4f;
}
</style>
